<template>
	  <div ref="dom" class="chart-content"></div>
</template>

<script>
	import echarts from 'echarts'
	export default {
	  name: 'PieBar',
	  props: {
    	chartData: Array,
	    title: String,
	    subtitle: String,
	    itemname: String
	  },
	  watch: {
	    chartData(val) {
			this.update()
	    }
      },
      methods: {
      	update() {
		    this.$nextTick(() => {
			  let option = {
			  	 color: ['#6881A7','#80BC9E', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
			  	 tooltip : {
			        trigger: 'item'
			     },
			     title:{
			     	text: this.title,
			     	subtext: this.subtitle,
			     	x: 'center',
			     	y: 'bottom',
			     	textStyle: {
			     		fontSize: 14
			     	}
			     },
			  	 type: 'pie',
			  	 series : [
			        {
			            name: this.itemname,
			            type: 'pie',
			            radius : '70%',
			            data: this.chartData,
				        itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
						            
			        }
			    ]
			  };
			  let dom = echarts.init(this.$refs.dom)
			  dom.setOption(option)
			})
	
	    }
	  },
	  mounted () {
		this.update()
	  }
	}

</script>

<style scoped>
	.chart-content {
		width: 100%;
		height: 100%;
	}
</style>